/*--------------------------------------------------------------
  文章列表
--------------------------------------------------------------*/
(function () {
  particlesJS('particles-js',
    {
      "particles": {
        "number": {
          "value": 30,
          "density": {
            "enable": true,
            "value_area": 800
          }
        },
        "color": {
          "value": ["#fe6913", "#02b7ee", "#11305f", "#dcd203"]
        },
        "shape": {
          "type": "circle",
          "stroke": {
            "width": 10,
            "color": "#000000"
          },
          "polygon": {
            "nb_sides": 5
          },
          "image": {
            "src": "img/github.svg",
            "width": 100,
            "height": 100
          }
        },
        "opacity": {
          "value": 1,
          "random": true,
          "anim": {
            "enable": true,
            "speed": 1,
            "opacity_min": 0.3,
            "sync": false
          }
        },
        "size": {
          "value": 10,
          "random": true,
          "anim": {
            "enable": false,
            "speed": 40,
            "size_min": 5,
            "sync": false
          }
        },
        "line_linked": {
          "enable": true,
          "distance": 300,
          "color": "#48525d",
          "opacity": 1,
          "width": 1
        },
        "move": {
          "enable": true,
          "speed": 3,
          "direction": "none",
          "random": false,
          "straight": false,
          "out_mode": "out",
          "attract": {
            "enable": false,
            "rotateX": 600,
            "rotateY": 1200
          }
        }
      },
      "interactivity": {
        "detect_on": "canvas",
        "events": {
          "onhover": {
            "enable": true,
            "mode": "grab"
          },
          "onclick": {
            "enable": true,
            "mode": "repulse"
          },
          "resize": true
        },
        "modes": {
          "grab": {
            "distance": 400,
            "line_linked": {
              "opacity": 1
            }
          },
          "bubble": {
            "distance": 400,
            "size": 40,
            "duration": 2,
            "opacity": 8,
            "speed": 3
          },
          "repulse": {
            "distance": 200
          },
          "push": {
            "particles_nb": 4
          },
          "remove": {
            "particles_nb": 2
          }
        }
      },
      "retina_detect": true,
      "config_demo": {
        "hide_card": false,
        "background_color": "#b61924",
        "background_image": "",
        "background_position": "50% 50%",
        "background_repeat": "no-repeat",
        "background_size": "cover"
      }
    }

  );

  
  let totalPage = 0;
  let pageNum = getQueryString('pageNum') || 1;
  let q = getQueryString('q') || '';
  const articleWrap = document.querySelector('#blog .article-wrap')
  const inputSearch = document.querySelector('#input-search')
  const btnSearch = document.querySelector('#btn-search')

  inputSearch.value = q
  btnSearch.addEventListener('click', function () {
    location.href = changeURLArg(location.search, 'q', inputSearch.value)
  }, false);
  inputSearch.addEventListener('keydown', function (e) {
    if (e.keyCode === 13) {
      location.href = changeURLArg(location.search, 'q', inputSearch.value)
    }
  }, false);

  fetchData();
  function fetchData() {
    axios.get('/getBlogs', {
      params: {
        pageNum: pageNum,
        pageSize: 6,
        q
      }
    })
      .then(res => {
        totalPage = res.data.totalPage;
        inInitialPagination();
        let blogs = res.data.data;
        articleWrap.innerHTML = ''
        blogs.forEach(blog => {
          articleWrap.insertAdjacentHTML('beforeend', `
          <article>
            <a class="img-box" href="blog-single.html?id=${blog.id}" style="background-image:url(${imgUrl(blog.image)});"></a>
            <div class="content-wrap">
              <a href="blog-single.html?id=${blog.id}">
                <h3>${blog.title}</h3>
              </a>
              <p>${blog.abstract} </p>
              <div class="flex justify-content-between align-items-center">
                <span class="date"><i class="iconfont qm-clock"></i>${blog.createTime.substring(0, 10)}</span>
                <a class="more" href="blog-single.html?id=${blog.id}">查看更多<i class="iconfont qm-arrow-right"></i></a>
              </div>
            </div>
          </article>
        `);
        });
      })
      .catch(err => {
        alert('没找到数据！！');
      });
  };

  function inInitialPagination() {
    const indicatorsUl = document.getElementById('indicators');
    indicatorsUl.innerHTML = ''

    const prev = document.createElement('li');
    prev.className = `${pageNum == 1 ? 'disabled' : ''}`;
    prev.innerHTML = `
        <a href="./blogs.html?pageNum=${Number(pageNum) - 1}&q=${q}" id="arrow-left" class="${pageNum == 1 ? '' : 'switchover'}"><i class="iconfont qm-arrow-left"></i></a>
        `;
    indicatorsUl.appendChild(prev);

    for (let i = 1; i <= totalPage; i++) {
      const li = document.createElement('li');
      li.className = `
            ${pageNum == i ? 'current' : ''}
            `;
      li.innerHTML = `
            <a href="./blogs.html?pageNum=${i}&q=${q}" class="">${i}</a>
            `;
      indicatorsUl.appendChild(li);
    }

    const next = document.createElement('li');
    next.className = `${pageNum == totalPage ? 'disabled' : ''}`;
    next.innerHTML = `
        <a href="./blogs.html?pageNum=${Number(pageNum) + 1}&q=${q}" id="arrow-right" class="${pageNum == totalPage ? '' : 'switchover'}"><i class="iconfont qm-arrow-right"></i></a>
        `;
    indicatorsUl.appendChild(next);
  };
})()
